import { Component, Fragment } from "react";
import { Layout, Message } from '@arco-design/web-react';
import DeptTree from "./modal/deptTree";
import UserTable from "./modal/userTable";
import {fetchUserDepttList, fetchUserList, fetchRoleList} from '../../../../api/common';
import '../../../../styles/userManager/index.css'
const Sider = Layout.Sider;
const Header = Layout.Header;
const Content = Layout.Content;
class UserManager extends Component{
    constructor(props){
        super(props)
        this.state = {
            activeTab: 'list',
            searchtitle: '',
            PoliceAddVisible: false,
            synchronizeLoading: false,
            RoleVisible: false,
            spinloading: true,
            moduletitle: '加载中',
            moduletype: '',
            currPeopleId: '',
            hasList: false,
            searchKey: {
              keyword: '',
              pageSize: 10,
              pageNo: 1,
              total:100,
              deptCode: '',
            },
            btnRights: {
              view: true,
              freeze: true,
              delete: true,
              edit: true,
              add: true,
            }, // 按钮权限的数组
            userDeptResult: { list: [], loading: true, default: 0 },
            userListResult: { list: [], loading: true },
            userDetailResult: { list: [], loading: false },
            userRoleSetResult: { list: [], loading: false},
        }
        this.setState.bind(this)
    }

    getDeptList(){
        return new Promise((resove,reject)=>{
            fetchUserDepttList({},
                (res)=>{
                    this.setState(state=>{
                        return{
                            ...state,
                            userDeptResult: {
                                list: res.data.list,
                                loading: false,
                                default: res.data.list[0].id || null
                            },
                            moduletitle: res.data.list[0].deptName || null, 
                            moduletype: res.data.list[0].deptName,
                            searchKey: {
                                ...state.searchKey,
                                deptCode: res.data.list[0].deptCode || null,
                            }
                        }
                    })
                    resove({
                        status: true,
                    })
                },
                ()=>{
                    Message.error('获取Dept失败')
                    reject({
                        status: false
                    })
            })
        })
    }



    async prepareData(){
        // 加载deptTree
        const step1 = await this.getDeptList()
        // 加载userList
        if (step1.status){
            fetchUserList({
                    moduletype: this.state.moduletype,
                    searchKey: this.state.searchKey
                },
                (res)=>{
                    this.setState((state)=>{
                        return{
                            ...state,
                            userListResult: {
                                ...state.userListResult,
                                list: res.data.list,
                                loading: false  
                            },
                            searchKey: {
                                ...state.searchKey,
                                deptCode: res.data.list[0].deptCode || null,
                                pageSize: res.data.pageSize,
                                pageNo: res.data.pageNo,
                                total: res.data.totalCount
                            }
                        }
                    })
                },
                ()=>{
                    Message.error('error')
                }
            )
        }
        // 加载roleList
        fetchRoleList({},
            (res)=>{
                this.setState(state=>{
                    return{
                        ...state,
                        userRoleSetResult: {
                            ...state.userRoleSetResult,
                            list: res.data.list
                        }
                    }
                })
            },
            (error)=>{
                Message.error(error)
            }
        )
    }


    componentWillMount(){
       this.prepareData()
    }



    render(){
        return(
            <div className='layout-basic' style={{height: '100%'}}>
                <Layout style={{ height: '100%' }}>
                    <Layout>
                    <Sider>
                        <div className="container">
                            <div className="sider">
                                {this.state.moduletitle}
                            </div>
                            <div className="content">
                                <DeptTree state={this.state} setState={this.setState.bind(this)}/>
                            </div>
                        </div>
                    </Sider>
                    <Content>   
                        <div className="container">
                            <div className="sider">
                                <span>{this.state.moduletype}{this.state.userListResult.list.length}人</span>
                            </div>
                            <div className="content">
                                <UserTable state={this.state} setState={this.setState.bind(this)}/>
                            </div>
                        </div>    
                    </Content>
                    </Layout>
                </Layout>
            </div>
        )
    }
}

export default UserManager